<template>
  <div class="container">
    <!-- 油款支付-->
    <el-dialog
        :visible.sync="ykzfDialogShow"
        width="640px"
        center>
      <span slot="title" class="dialog-title">
        油款支付
      </span>
      <div class="ykzf-box">
        <div class="item">
          <span class="text">应付金额：</span>
          <span class="value">¥{{orderDetail.amountPay || 0}}</span>
        </div>
        <div class="item">
          <span class="text">账户余额：</span>
          <span class="value">¥2999</span>
        </div>
        <div class="tip">
          使用油款支付之后，油款余额为-¥800，后期收到的油费会自动冲抵， 请问是否确认使用油款支付
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 微信支付-->
    <el-dialog
        :visible.sync="wxDialogShow"
        width="640px"
        center>
      <span slot="title" class="dialog-title">
        微信支付
      </span>
      <div class="wx-box">
        <div class="item">
          <span class="text">应付金额：</span>
          <span class="value">¥{{orderDetail.amountPay || 0}}</span>
        </div>
        <div class="QR-code">
          <div v-if="qrCodeloading" class="load-style">加载中...</div>
          <div v-if="!qrCodeloading && isError" class="load-style">请求超时，请重新刷新页面</div>
          <div id='wxqrcode' ref='wxqrcode'></div>
        </div>
        <div class="footer">
          <img src="https://web.czb365.com/ty/merchant/wx_pay_icon.png" class="pay-icon">
          <span class="pay-text">微信支付</span>
        </div>
      </div>
    </el-dialog>
    <!-- 支付宝支付-->
    <el-dialog
        :visible.sync="zfbDialogShow"
        width="640px"
        center>
      <span slot="title" class="dialog-title">
        支付宝支付
      </span>
      <div class="wx-box">
        <div class="item">
          <span class="text">应付金额：</span>
          <span class="value">¥{{orderDetail.amountPay || 0}}</span>
        </div>
        <div class="QR-code">
          <div v-if="qrCodeloading" class="load-style">加载中...</div>
          <div v-if="!qrCodeloading && isError" class="load-style">请求超时，请重新刷新页面</div>
          <div id='zfbqrcode' ref='zfbqrcode'></div>
        </div>
        <div class="footer">
          <img src="https://web.czb365.com/ty/merchant/zfb_pay_icon.png" class="pay-icon">
          <span class="pay-text">支付宝支付</span>
        </div>
      </div>
    </el-dialog>
    <!-- 对公转账-->
    <el-dialog
        :visible.sync="dgzzDialogShow"
        width="640px"
        center>
      <span slot="title" class="dialog-title">
        线下汇款
      </span>
      <div class="ykzf-box">
        <div class="item">
          <span class="text">企业全称：</span>
          <span class="value">{{bankAccountInfo.signBodyStr || ''}}</span>
        </div>
        <div class="item">
          <span class="text">银行账户：</span>
          <span class="value">{{bankAccountInfo.accountNo || ''}}</span>
        </div>
        <div class="item">
          <span class="text">开户行：</span>
          <span class="value">{{(bankAccountInfo.bank || '') + (bankAccountInfo.branchBank || '')}}</span>
        </div>
        <div class="tip bg-grey">
          请使用银行转账，我们将在确认到账后为您开通权益套餐，如有疑问请立即联系客服电话：400-0835-999
        </div>
      </div>
    </el-dialog>
    <div class="content-box">
      <!--    订单信息-->
      <div class="order-box">
        <div class="title">订单信息</div>
        <div class="info-item">
          <span class="label-text">购买套餐：</span>
          <span class="value">{{orderDetail.packageName || ''}}</span>
        </div>
        <div class="info-item">
          <span class="label-text">商户名称：</span>
          <span class="value">{{orderDetail.companyName || ''}}</span>
        </div>
        <div class="info-item">
          <span class="label-text">油站名称：</span>
          <span class="value">{{orderDetail.gasName || ''}}</span>
        </div>
        <div class="info-item">
          <span class="label-text">订单金额：</span>
          <span class="rmb">¥</span>
          <span class="price">{{orderDetail.amountPay || 0}}</span>
        </div>
        <div class="line"></div>
      </div>
      <!--    支付方式-->
      <div class="pay-mode-box">
        <div class="title">支付方式</div>
        <div class="pay-mode">
          <div class="pay-mode-item gray" @click="showPayMode('ykzf')">
            <!--放开该支付方式可直接切换图片展示-->
            <!-- <img src="https://web.czb365.com/ty/merchant/balance_pay_icon.png" class="pay-mode-icon">-->
            <img src="https://web.czb365.com/ty/merchant/balance_pay_icon_gray.png" class="pay-mode-icon">
            <span class="pay-mode-text">油款支付</span>
            <!--放开该支付方式可直接放开推荐标识-->
<!--            <div class="recommend">推荐</div>-->
          </div>
          <div class="pay-mode-item check" @click="showPayMode('wx')">
            <img src="https://web.czb365.com/ty/merchant/wx_pay_icon.png"  class="pay-mode-icon">
            <span class="pay-mode-text">微信支付</span>
          </div>
          <div class="pay-mode-item check" @click="showPayMode('zfb')">
            <img src="https://web.czb365.com/ty/merchant/zfb_pay_icon.png"  class="pay-mode-icon">
            <span class="pay-mode-text">支付宝支付</span>
          </div>
          <div class="pay-mode-item check" @click="showPayMode('dgzz')">
            <img src="https://web.czb365.com/ty/merchant/transfer_pay_icon.png"  class="pay-mode-icon">
            <div class="pay-mode-text">
              <div>线下汇款</div>
              <div class="tip">到账后2个工作日内开通</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRcode from 'qrcodejs2'
import { getOrderInfo, pay, pollingPayStatus, getBankAccount } from '@/api/market'
let timer = null
export default {
  name: 'paymentOrder',
  data () {
    return {
      ykzfDialogShow: false, // 油款支付
      wxDialogShow: false, // 微信支付
      zfbDialogShow: false, // 支付宝支付
      dgzzDialogShow: false, // 对公转账
      orderNo: '', // 订单号
      orderDetail: '', // 订单详情
      qrCode: '', // 生成的二维码
      bankAccountInfo: {}, // 线下汇款信息
      qrCodeloading: false, // 二维码加载中
      isError: false // 二维码获取是否返回错误
    }
  },
  mounted() {
    // 获取订单号
    this.orderNo = this.$route.query.orderNo || ''
     // 根据订单号获取订单详情
    this.getOrderInfoAjax()
  },
  // 离开页面清除定时器
  beforeDestroy () {
    if (timer) {
      clearInterval(timer)
    }
  },
  methods: {
    // 线下汇款信息查询
    async getBankAccountAjax () {
      try {
        const { code, result } = await getBankAccount()
        if (code !== 200) return
        this.bankAccountInfo = result || {}
      } catch (err) {
        console.log(err)
      }
    },
    // 根据订单号获取订单详情
    async getOrderInfoAjax () {
       try {
         // 订单详情假数据
         // this.orderDetail= {
         //   packageName: '基础套餐包',
         //   companyName: '三笠油站商户',
         //   gasName: '三笠加油站',
         //   amountPay: '3999'
         // }
         let params = {
           orderNo: this.orderNo
         }
         const { code, result } = await getOrderInfo (params)
         if (code !== 200) return
         this.orderDetail = result || {}
       } catch (err) {
         console.log(err)
       }
    },
    // 选择支付方式
    showPayMode (key) {
      switch (key) {
        case 'ykzf': // 油款支付
          this.$message.info('敬请期待')
          // 暂时不开放
          // this.ykzfDialogShow = true
          break
        case 'wx': // 微信支付
          this.wxDialogShow = true
          setTimeout(() => {
            // 先清除弹窗
            this.$refs.wxqrcode.innerHTML = ''
            this.payajax(1, 'wxqrcode')
          }, 100)
          break
        case 'zfb': // 支付宝支付
          this.zfbDialogShow = true
          setTimeout(() => {
            // 先清除弹窗
            this.$refs.zfbqrcode.innerHTML = ''
            this.payajax(2, 'zfbqrcode')
          }, 100)
          break
        case 'dgzz': // 对公转账
          this.dgzzDialogShow = true
          // 线下汇款信息查询
          this.getBankAccountAjax()
          break
      }
    },
    // 下单支付 生成二维码
    async payajax (payType, ref) {
      this.qrCode = ''
      try {
        this.qrCodeloading = true
        let { amountPay,orderNo } = this.orderDetail
        let params = {
          payType, // 支付方式：1-微信，2-支付宝
          amount: amountPay,
          orderNo
        }
        // 支付方式：1-微信，2-支付宝
        const { code, result } = await pay(params)
        if (code !== 200) {
           // 展示错误提示
          return this.isError = true
        }
        this.isError = false
        this.qrCode = result.qrCode
        if (this.qrCode) {
          // 进行二维码的绘制
          this.qrcode(ref)
        }
      }catch (err) {
        console.log(err)
      }finally {
        this.qrCodeloading = false
      }
    },
    // 生成二维码
    qrcode (ref) {
      try {
        var qr = new QRcode(ref, {
            width: 200,
            height: 200, // 高度
            text: this.qrCode || '' // 二维码内容
        })
        this.loop()
        console.log(qr)
      } catch (e) {
        console.log(e)
      }
    },
    // 订单状态轮循接口
    loop () {
      clearInterval(timer)
      let { orderNo, amountPay, gasId } = this.orderDetail
      let params = {
        orderNo
      }
      timer = setInterval(() => {
        pollingPayStatus (params).then(({ code, result }) => {
          if (code !== 200) {
            clearInterval(timer)
          } else {
            if (result.orderStatus === 2) {
              clearInterval(timer)
              this.$router.push({path: '/marketCenter/orderCompletion', query: {amountPay, gasId}})
            }
          }
        })
      },2000)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px 10px 0 10px;
  height: 100%;
  .content-box {
    min-width: 994px;
    min-height: 548px;
    padding: 48px 64px;
    background: #ffffff;
    color: #222222;
    height: 100%;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 48px;
  }
  .info-item {
    font-size: 16px;
    margin-bottom: 24px;
    .label-text {
      color: #999999;
    }
    .rmb {
      color: #E31837;
      font-size: 20px;
    }
    .price {
      color: #E31837;
      font-size: 32px;
    }
  }
  .line {
    height: 1px;
    width: 860px;
    background: #EAEAEA;
    margin-bottom: 48px;
  }
  .pay-mode {
    display: flex;
    align-items: center;
    .pay-mode-item {
      position: relative;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      border: 1px solid #CCCCCC;
      border-radius: 2px;
      min-width: 200px;
      .pay-mode-icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
      }
      .pay-mode-text {
        font-size: 16px;
        color: #333333;
        .tip {
          margin-top: 4px;
          color: #999999;
        }
      }
      .recommend {
        position: absolute;
        color: #ffffff;
        font-size: 12px;
        top: 18px;
        right: 10px;
        width: 40px;
        height: 20px;
        line-height: 20px;
        background: linear-gradient(90deg, #FF7B23 0%, #ED3636 100%);
        border-radius: 10px 10px 10px 0px;
        text-align: center;
      }
    }
    .pay-mode-item.check:hover{
      border: 2px solid #4B7EFE;
      cursor: pointer;
    }
    .pay-mode-item:not(:last-child) {
      margin-right: 20px;
    }
    .pay-mode-item.gray{
      .pay-mode-text {
        color: #999999;
      }
    }
  }
}
.dialog-title {
  font-size: 20px;
  color: #222222;
  font-weight: bold;
}
.ykzf-box {
  display: flex;
  flex-direction: column;
  padding: 0 74px;
  .item {
    font-size: 16px;
    margin-bottom: 24px;
    display: flex;
    .text {
      color: #999999;
      display: inline-block;
      width: 85px;
      text-align: right;
    }
    .value {
      color: #222222;
      flex: 1;
    }
  }
  .tip {
    color: #E31837;
  }
  .tip.bg-grey {
    background: #F8F8F8;
    color: #666666;
    padding: 16px 20px;
    border-radius: 2px;
    margin-top: 26px;
    line-height: 24px;
  }
}
.dialog-footer {
  /deep/ .el-button {
    padding: 12px 56px;
  }
  /deep/ .el-button+.el-button {
    margin-left: 36px;
  }
}
.wx-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .item {
    margin-bottom: 32px;
    font-size: 18px;
    .text {
      color: #333333;
    }
    .value {
      font-size: 30px;
      color: #E31837;
    }
  }
  .QR-code {
    width: 200px;
    height: 200px;
    .load-style {
      font-size: 20px;
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
  }
  .footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    .pay-icon {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }
    .pay-text {
      font-size: 16px;
      color: #333333;
    }
  }
}
#wxqrcode, #zfbqrcode{
  display: block;
  img{
    display: block;
    margin:0 auto;
  }
}

</style>
